<template>
  <div class="song-list">
    <!-- 导航栏 -->
    <div style="
        width: 100vw;
        height: 3rem;
        overflow: hidden;
        position: fixed;
        z-index: 1;
      ">
      <div style="height:3rem;filter: grayscale(0.3);">
        <div class="backfilter" :style="{ 'background-image': 'url(' + song.coverImgUrl + ')' }"></div>
      </div>
      <div class="back-falsification" style="position: fixed; top: 0; z-index: 999">
        <svg @click="onClickLeft" viewBox="0 0 120 100" style="
            height: 1em;
            width: 3em;
            padding-top: 0.8em;
            padding-bottom: 1em;
          ">
          <line x1="0" y1="50" x2="50" y2="100" style="stroke: white; stroke-width: 10" fill="aqua"></line>
          <line x1="50" y1="0" x2="0" y2="50" style="stroke: white; stroke-width: 10" fill="aqua"></line>
          <line x1="0" y1="50" x2="120" y2="50" style="stroke: white; stroke-width: 10" fill="aqua"></line>
        </svg>
        <span class="bianjv" style="font-size: 20px">歌单</span>
        <span> </span>
      </div>
    </div>
    <!-- 歌单首部 -->

    <div class="head">
      <div style="height: 3rem; height: 3rem; width: 100vw;  filter: grayscale(0.3);">
        <div class="backfilter1" :style="{ 'background-image': 'url(' + song.coverImgUrl + ')' }"></div>
      </div>
      <div class="hearder">
        <div class="hearder-left">
          <img :src="song.coverImgUrl" alt="" />
          <div v-if="song.playCount > 100000000" class="back1">
            <span class="zi">▷ {{ song.playCount | numFilter(1) }}</span>
          </div>
          <div v-else class="back">
            <span class="zi">▷ {{ song.playCount | numFilter(1) }}</span>
          </div>
        </div>
        <div class="hearder-right">
          <span>{{ song.name }}</span>
          <div class="word">
            <img :src="song.nickimg" alt="" />
            <span>{{ song.nickname }}</span>
          </div>
          <div class="Synopsis">{{ song.coverSynopsis }}</div>

        </div>
      </div>
    </div>
    <!-- 歌单列表 -->

    <div class="list">
      <!-- <div class="collection">
        <div></div>
        <div></div>
        <div></div>
      </div> -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="all">
          <div class="play_all">
            播放全部({{ song.lengths }})
          </div>

        </div>
        <div v-for="(item, index) in list" :key="index" :title="item" class="song" @click="onput(item)">
          <div class="song-left">
            <span v-if="item.id == $store.state.playerState.playData.songId">
              <svg viewBox="-20 -30 100 100" style="height: 1.2em; width: 1.2em; padding-top: 0.8em">
                <line x1="25" y1="25" x2="25" y2="75" style="stroke: red; stroke-width: 4" fill="aqua">
                  <animate attributeName="y1" from="25" to="75" dur="0.5s" fill="freeze" id="toDown" begin="toUp.end">
                  </animate>
                  <animate attributeName="y1" from="75" to="25" dur="0.5s" fill="freeze" id="toUp" begin="0;toDown.end">
                  </animate>
                </line>
                <line x1="40" y1="50" x2="40" y2="75" style="stroke: blue; stroke-width: 4" fill="aqua">
                  <animate attributeName="y1" from="25" to="75" dur="0.3s" fill="freeze" id="toDown" begin="toUp.end">
                  </animate>
                  <animate attributeName="y1" from="75" to="25" dur="0.3s" fill="freeze" id="toUp" begin="0;toDown.end">
                  </animate>
                </line>
                <line x1="55" y1="25" x2="55" y2="75" style="stroke: gray; stroke-width: 4" fill="aqua">
                  <animate attributeName="y1" from="25" to="75" dur="0.6s" fill="freeze" id="toDown" begin="toUp.end">
                  </animate>
                  <animate attributeName="y1" from="75" to="25" dur="0.6s" fill="freeze" id="toUp" begin="0;toDown.end">
                  </animate>
                </line>
                <line x1="70" y1="25" x2="70" y2="75" style="stroke: #660000; stroke-width: 4" fill="aqua">
                  <animate attributeName="y1" from="25" to="75" dur="0.2s" fill="freeze" id="toDown" begin="toUp.end">
                  </animate>
                  <animate attributeName="y1" from="50" to="25" dur="0.4s" fill="freeze" id="toUp" begin="0;toDown.end">
                  </animate>
                </line>
              </svg>
            </span>
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="song-mid">
            <div class="song-mid-alig">
              <div class="music-top">{{ item.title }}</div>
              <div class="music-bottom">{{ item.singer }}</div>
            </div>
          </div>
          <div class="song-right">
              <span>▲</span>
            </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      song: {
        name: "", //歌单名
        coverImgUrl: "", //logo
        nickimg: "", //作者头像
        coverSynopsis: "", //歌单简介
        playCount: "", //歌单播放量
        avatarUrl: "", //作者头像
        nickname: "", //作者名称
        lengths: "", //歌单总数
      },
      songlist: [], //歌曲列表
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getListMusicData();
    this.getList();
    window.that = this;
  },
  methods: {
    onput(item) {
      this.$store.dispatch("serviceSetPlayData", item);
      console.log(item);
      this.$store.dispatch("serviceSetPlayData", { id: item.id });
    },
    getListMusicData() {
      // console.log(this.$route.params.id)
      this.$request("get", "/playlist/detail?id=" + this.$route.params.id).then(
        (res) => {
          // console.log(this.$route.params.id)
          console.log(res);
          this.song.name = res.playlist.name;
          this.song.coverImgUrl = res.playlist.coverImgUrl;
          this.song.nickname = res.playlist.creator.nickname;
          this.song.coverSynopsis = res.playlist.description;
          this.song.playCount = res.playlist.playCount;

          // console.log(this.song.playCount)
          this.song.nickimg = res.playlist.creator.avatarUrl;
          // console.log(this.song.coverSynopsis)
        }
      );
    },
    getList() {
      this.$request(
        "get",
        "/playlist/track/all?id=" + this.$route.params.id
      ).then((res) => {
        console.log("详细歌曲目录");
        console.log(res);
        window.res = res;
        let songlist_long = res.songs.length;
        this.song.lengths = songlist_long;
        let music_id = "";
        let music_name = "";
        let music_picUrl = "";
        for (let i = 0; i < songlist_long; i++) {
          let songlist_singer = res.songs[i].ar.length;
          music_name = res.songs[i].name; //歌曲名
          music_id = res.songs[i].id; //歌曲id
          music_picUrl = res.songs[i].al.picUrl; //歌曲图片
          // console.log(songlist_singer)
          let singer_name = [];
          for (let j = 0; j < songlist_singer; j++) {
            singer_name.push(res.songs[i].ar[j].name);
          }
          singer_name = singer_name.join("/");
          // console.log(b,res.songs[i])
          // console.log(ab)
          this.songlist.push({
            id: music_id,
            singer: singer_name,
            title: music_name,
            headUrl: music_picUrl,
          });
        }

        console.log(this.songlist);
        // console.log(ab)
        // this.songlist = res.songs;
        // console.log(this.songlist)
      });
    },

    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    onLoad() {
      setTimeout(() => {
        //注意splice和slice方法的差异
        this.list = this.list.concat(this.songlist.splice(0, 20));
        console.log(this.list);
        //加载状态结束
        this.loading = false;
        //数据全部加载完成
        if (this.list.length >= this.songnum) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  filters: {
    numFilter(value, num) {
      let temp = "";
      if (value > 100000000) {
        num = parseFloat(value / 100000000).toFixed(num);
        temp = num + "亿";
      } else {
        num = parseFloat(value / 10000).toFixed(num);
        temp = num + "万";
      }
      return temp;
    },
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}

.song-list {
  overflow: hidden;
}

.backfilter {
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 3rem;
  filter: blur(10px);
  background-size: cover;
  margin-top: -20px;
  zoom: 4;
  margin-left: -20px;
  margin-bottom: -10px;
}

.head {
  width: 100vw;
  height: 13.5rem;
  overflow: hidden;
  margin-top: 2.97rem;
  box-shadow: 0px 1px 4px 3px rgb(0 0 0 / 20%);
}

.backfilter1 {
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 5rem;
  filter: blur(10px);
  background-size: cover;
  margin-top: -25px;
  zoom: 4;
  margin-left: -20px;
  margin-bottom: -20px;

}

.back-falsification {
  margin-bottom: 0;
  height: 3rem;
  text-align: left;
  padding-left: 0.8rem;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  position: absolute;
  top: 0px;
  margin-top: 0.35rem;
}

.bianjv {
  margin-top: 0.5rem;
  color: white;
}

.hearder {
  display: flex;
  justify-content: flex-start;
  margin-top: 3.8rem;
  top: 0;
  z-index: 998;
  color: white;
}

.hearder-left {
  position: relative;
  text-align: left;
  margin-top: 1vh;

}

.hearder-right {
  position: relative;
  text-align: left;
  margin-top: 1vh;
  left: 5vw;
  width: 13rem;
  padding-top: 0.8rem;
}

.hearder-right>span {
  font-size: 18px;
}

.Synopsis {
  width: 50vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 1rem;
}

.play_all {
  width: calc(40%);
  height: 3rem;
  border: rgb(213, 213, 213) solid 1px;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1.5rem;
  z-index: 0;
  background: white;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 0px 1px 3px 2px rgb(0 0 0 / 20%);

}

.hearder-left>img {
  width: 35vw;
  border-radius: 1rem;
  margin-left: 1rem;
  border: 1px solid rgb(107, 103, 103);
}

.all {
  display: flex;
  justify-content: center;
}

.back1 {
  position: absolute;
  right: 1vw;
  bottom: 13.5vh;
  font-size: 16px;
  border-radius: 0.5rem;
  width: 4rem;
  display: inline-block;
  background-color: rgba(190, 185, 185, 0.5);
  text-align: center;
}

.back {
  position: absolute;
  right: 1vw;
  bottom: 13.5vh;
  font-size: 16px;
  border-radius: 0.5rem;
  width: 6rem;
  display: inline-block;
  background-color: rgba(190, 185, 185, 0.5);
  text-align: center;
}

.zi {
  color: white;
}

.hearder-left>span>span {
  bottom: 2rem;
}

.word {
  display: flex;
  margin-top: 1rem;
}

.word>img {
  width: 12%;
  height: 12%;
  border-radius: 100%;
}

.word>span {
  margin-left: 0.5rem;
  margin-top: 0.2rem;
}

.song {
  display: flex;
  justify-content: flex-start;
  height: 10vh;
}

.song-left {
  height: 100%;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.song-mid {
  height: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
}
.song-mid-alig{
  width: 85%;
}
.music-top{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  text-align: left;
}
.music-bottom{
  text-align: left;
}

</style>